<template>
	<main-container>
		<!-- 工具栏 -->
		<div class="hx-table-toolbar">
			<div></div>
			<right-toolbar :searchBtn="true" :refreshBtn="true" @search="showSearch = !showSearch" @refresh="initPage"></right-toolbar>
		</div>
		<!-- 列表 -->
		<el-table v-loading="loading" :data="tableData" border>
			<el-table-column prop="tokenId" label="token" />
			<el-table-column prop="tokenTimeout" label="过期时间" />
			<el-table-column prop="userName" label="登录用户" />
			<el-table-column prop="ipAddr" label="登录地址" />
			<el-table-column prop="location" label="登录地点" />
			<el-table-column prop="loginTime" label="登录时间" />
			<el-table-column prop="browser" label="浏览器" />
			<el-table-column prop="os" label="操作系统" />
			<el-table-column label="操作" align="center" fixed="right" width="300">
				<template #default="scope">
					<el-button link type="danger" v-auth="'upms:onlineuser:forced'" @click="forced(scope.row.loginToken)">
						<el-icon> <ele-Delete /> </el-icon>强退用户
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue';
import { getList, delObj } from '/@/api/upms/onlineuser';
import { ElMessageBox, ElMessage } from 'element-plus';
export default defineComponent({
	setup() {
		const data = reactive({
			tableData: [],
		});
		const showSearch = ref(true);
		const loading = ref(false);

		const initPage = async () => {
			loading.value = true;
			let params = {};
			await getList(params)
				.then((response) => {
					data.tableData = response.data.data;
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
		};
		// 强退用户
		const forced = (token: string) => {
			ElMessageBox.confirm(`此操作将强退该用户, 是否继续?`, '提示', {
				confirmButtonText: '删除',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					delObj(token)
						.then((response: any) => {
							ElMessage.success('强退成功');
							initPage();
						})
						.catch(() => {});
				})
				.catch(() => {});
		};

		initPage();
		return {
			showSearch,
			loading,
			initPage,
			forced,
			...toRefs(data),
		};
	},
});
</script>
